<template>
  <page-header-wrapper>
    <a-row :gutter="24">
      <a-col :span="4">
        <a-card :bordered="false" class="ant-pro-components-tag-select" style="height: 800px">
          <a-input-search placeholder="请输入内容" @search="onSearch" />
          <a-tree :show-line="true"
                  :expanded-keys="expandedKeys"
                  :auto-expand-parent="autoExpandParent"
                  :tree-data="treedata"
                  @expand="onExpand"
                  @select="selecttree"
          >
          </a-tree>
        </a-card>
      </a-col>
      <a-col :span="20">
        <a-card :bordered="false">
          <div class="gtitle"><a-icon type="info-circle" style="color: #108ee9" theme="filled"/>补丁组维护及管理</div>
          <div style="margin-top: 30px;margin-bottom: 50px;">
            <a-button v-if="groupId!=10" type="primary" style="margin-right: 15px" @click="addsamelevel()">添加同级组</a-button>
            <a-button type="primary" style="margin-right: 15px" @click="addsublevel()">添加下级组</a-button>
            <a-button type="primary" style="margin-right: 15px" @click="modifygroupname()">修改组名称</a-button>
            <a-button  v-if="groupId!=10" type="primary" style="margin-right: 15px" @click="deletegroup()">删除组</a-button>
          </div>
        </a-card>
      </a-col>
    </a-row>

    <Mymodal ref="mymodal"></Mymodal>
  </page-header-wrapper>
</template>

<script>
  import {getpatchgrouplist,savepatchgroup,deletepatchgroup} from '@/api/patch'
  import Mymodal from '@/components/mycomp/mymodal.vue'
  import { addassetsgroup, deletegroup } from '@/api/assets'
export default {
  name: "groupingManage",
  components: { Mymodal },
  data(){
    return{
      /** 树**/
      expandedKeys:[],
      autoExpandParent:true,
      treedata:[],
      groupId:'',
      pId:'',
      groupMap:{},
      /** 树**/


    }
  },
  mounted() {
    this.getpatchgroup()
  },
  methods:{
    modifygroupname(){
      if(!this.groupId){
        this.$message.info('请先选择一个分组')
        return
      }

      let modalinfo = {
        title:'修改分组',
        list:[
          {name:'name',label:'分组名称',require:true,type:'input',errortip:'请输入名称',value:this.groupMap[this.groupId].title},
        ],
        ok:this.creategroupok.bind(this),
        moreinfo:{
          pId:this.groupMap[this.groupId].pId,
          id:this.groupId
        }
      }
      this.$refs.mymodal.showmodal(modalinfo)
    },


    deletegroup(){
      if(!this.groupId){
        this.$message.info('请先选择一个分组')
        return
      }

      this.$confirm({
        title: '是否确认删除数据?',
        okText: '是',
        okType: 'danger',
        cancelText: '否',
        onOk:()=> {
          deletepatchgroup({ids:this.groupId}).then(res=>{
            if(res.code!=200){
              this.$message.error(res.message)
            }else{
              this.groupId = ''
              this.getpatchgroup()
            }

          })
        }
      });

    },

    addsamelevel(){
      if(!this.groupId){
        this.$message.info('请先选择一个分组')
        return
      }

      let modalinfo = {
        title:'新建补丁组',
        list:[
          {name:'name',label:'组名称',require:true,type:'input',errortip:'请输入名称'},
        ],
        ok:this.creategroupok.bind(this),
        moreinfo:{
          pId:this.pId
        }
      }
      this.$refs.mymodal.showmodal(modalinfo)
    },

    creategroupok(params){
      savepatchgroup(params).then(res=>{
        this.getpatchgroup()
      })

    },
    addsublevel(){
      if(!this.groupId){
        this.$message.info('请先选择一个分组')
        return
      }

      let modalinfo = {
        title:'新建补丁组',
        list:[
          {name:'name',label:'组名称',require:true,type:'input',errortip:'请输入名称'},
        ],
        ok:this.creategroupok.bind(this),
        moreinfo:{
          pId:this.groupId
        }
      }
      this.$refs.mymodal.showmodal(modalinfo)
    },
    /**树 **/
    getParentKey(key, tree){
      let parentKey;
      for (let i = 0; i < tree.length; i++) {
        const node = tree[i];
        if (node.children) {
          if (node.children.some(item => item.key === key)) {
            parentKey = node.key;
          } else if (this.getParentKey(key, node.children)) {
            parentKey = this.getParentKey(key, node.children);
          }
        }
      }
      return parentKey;
    },
    getallnode(list){
      let array = []
      for(let i =0;i<list.length;i++){
        array.push(list[i])
        if(list[i].children){
          array = array.concat(this.getallnode(list[i].children))
        }
      }
      return array
    },
    onSearch(value) {
      let list = this.getallnode(this.treedata)
      let expandedKeys1 = list
        .map(item => {
          if (item.title.indexOf(value) > -1) {
            return this.getParentKey(item.key, this.treedata);
          }
          return null;
        })
      let expandedKeys = expandedKeys1
        .filter((item, i, self) => item && self.indexOf(item) === i);
      Object.assign(this, {
        expandedKeys,
        searchValue: value,
        autoExpandParent: true,
      });
    },
    onExpand(expandedKeys) {
      this.expandedKeys = expandedKeys;
      this.autoExpandParent = false;
    },
    selecttree(key,e){
      if(e.node.$parent.value){
        this.pId = e.node.$parent.value
      }else{
        this.pId = 0
      }
      this.groupId = key[0]
      this.getpatchgroup()
    },
    getpatchgroup(){
      getpatchgrouplist({isHaveWhole:1}).then(res=>{
        this.groupMap = {}
        if(res.data){
          this.treedata = this.transtotree(res.data)

          let list = this.getallnode(this.treedata)
          for(let i in list){
            this.groupMap[list[i].key] = list[i]
          }
        }
      })
    },
    transtotree(list){
      let arry = []
      for(let i in list){
        let json = {}
        json.title = list[i].name
        json.key = list[i].id
        json.value = list[i].id
        json.pid = list[i].pId
        if(list[i].childNode){
          json.children = this.transtotree(list[i].childNode)
        }
        arry.push(json)
      }
      return arry
    },
    /** 树**/
  }
}
</script>

<style scoped>
  .gtitle{
    background-color: #e6f3fc;
    line-height: 40px;
    padding-left: 20px;
    color: #333;
    font-weight: bold;
  i{
    margin-right: 10px;
  }
  }
</style>